<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>course_add</title>
		<link rel="shortcut icon" href="../../images/my/favicon.ico" />
		<link rel="bookmark" href="../../images/my/favicon.ico" />
		<link rel="stylesheet" href="../../statics/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/admin/common.css" />
		<link rel="stylesheet" href="../../css/admin/update_my_base_info.css" />
		
	</head>

	<body style="background: #F6F6F6;">
		<div class="layui-fluid">
			<div class="layui-row">
				<div class="layui-col-md12">
					<div class="layui-card layui-anim layui-anim-upbit">
						<div class="layui-card-header">学生选课
							<span class="btn_right">
								<!--<button type="button" id="back" title="返回" class="layui-btn layui-btn-normal layui-btn-xs" onclick="javascript:window.history.back(-1);"><i class="layui-icon">&#xe65c;</i>返回</button>-->
								<button type="button" id="refresh" title="刷新" class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-refresh"></i></button>
							</span>
						</div>
						<div class="layui-card-body">
							<form class="layui-form" action="">
								<!--<div class="layui-form-item layui-row">
									<label class="my_layui-form-label layui-col-md1 layui-col-sm1 layui-col-xs12">选择班级：</label>
									<div class="layui-input-inline">
								        <select name="class" id="class" lay-verify="required" lay-search="">
								          <option value=""></option>
								          
								        </select>
      								</div>
								</div>-->
								
								<!--<div class="layui-form-item layui-row">
									<label class="my_layui-form-label layui-col-md1 layui-col-sm1 layui-col-xs12">选择课程：</label>
									<div class="layui-col-md10 layui-col-sm10 layui-col-xs12">
										<div class="layui-input-inline">
									        <select name="course_student" id="course_student" lay-verify="required" lay-search="">
									          <option value=""></option>
									         
									        </select>
								      	</div>
									</div>
									
								</div>-->
								<div class="layui-form-item layui-row">
									<label class="my_layui-form-label layui-col-md1 layui-col-sm1 layui-col-xs12">学生班级：</label>
									<div class="layui-input-inline">
								        <select name="class" id="class" lay-verify="required" lay-search="" lay-filter="class_change">
								          
								        </select>
      								</div>
								</div>
								<div class="layui-form-item layui-row">
									<label class="my_layui-form-label layui-col-md1 layui-col-sm1 layui-col-xs12">选择课程：</label>
									<div class="layui-col-md10 layui-col-sm10 layui-col-xs12" id="course" class="course">

									</div>
								</div>
								
								<div class="layui-form-item layui-row">
									<label class="my_layui-form-label layui-col-md1 layui-col-sm1 layui-col-xs1 layui-hide-xs">&nbsp;</label>
									<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo"></i><span>保存修改</span></button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../../statics/layui/layui.js"></script>
		<script type="text/javascript" src="../../statics/lay/system/admin/public.js" ></script>
		<script>
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					$ = layui.$,
					form = layui.form;
				initData();
				//表单监听提交
				form.on('submit(formDemo)', function(data) {
					var user_data = data.field;
					var classId=$("#class").val();
					var cName=[];
					var cIds=[];
					/*var cName=$("#course_student").find("option:selected").text();*/
					$.each($("#course").children('input:checked'), function(idx,obj) {
							cIds.push($(this).data('id'))
							cName.push($(this).attr('title').replace(/\(.*?\)/g,''))
					});
					var user_data = {
						classId:classId,
						cIds:cIds,
						cNames:cName
					}
					user_data.cIds=cIds;
					user_data=JSON.stringify(user_data);
					console.log(user_data)
					$.ajax({
						url: IP + '/api/teacher_eav/sysStudentCourse',
						type: 'POST',
						data: user_data,
						success: function(result, status, xhr) {
							layer.closeAll('loading');
							layer.msg(result.message, {
								icon: 1,
								time: 1000
							},function(){
								window.location.reload();
							});
						}
					});
					return false;
				});
				form.verify({
					cName: function(value, item) {
						if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
							return '课程名不能有特殊字符';
						}
						if(!(/^[\S]{1,16}$/.test(value))) {
							return '用户名必须1到16位，且不能出现空格';
						}
					}
				});
				//初始化页面数据
				function initData() {
					showClass();
					/*showCourse();*/
				}
				
				form.on('select(class_change)',function(data){
					var classId=data.value;
					showCourseCheckbox("course",classId);//这里原方法是tId，根据老师id去查找选择的课程，替换为classId
					showCourse(classId);
					form.render();
				});
				
				function showClass(){
					$.ajax({
						url: IP+ '/api/teacher_eav/sysStudentCourse/allClass',
						type: 'GET',
						async: false,
						success: function(result, status, xhr) {
							layer.closeAll('loading');
							var choice="<option value=\"\">请选择班级</option>";
							var option="";
							for(var i=0;i<result.data.length;i++){
								option+="<option value='"+result.data[i].classId+"'>"+result.data[i].className+"</option>";
								}
							$("#class").append(choice+option);
							form.render();
						}
							
					});
				}
				
				/*function showCourse(){
					$.ajax({
						url: IP+ '/api/teacher_eav/sysStudentCourse',
						type: 'GET',
						success: function(result, status, xhr) {
							layer.closeAll('loading');
						
							var option1="";						
							for(var i=0;i<result.data.length;i++){
								option1="<option value='"+result.data[i].cId+"'>"+result.data[i].cName+"</option>";
								$("#course_student").append(option1);
							form.render();
							}
							
							
						}
					});
				}*/
				//从中间表查询班级选择了哪些课程，然后渲染。班级选中后，通过改变事件。获取得到班级的classId，去查询班级选择了哪些课程
				function showCourse(classId) {
					$.ajax({
						url: IP + '/api/teacher_eav/sysStudentCourse/'+classId,
						type: 'GET',
						success: function(result, status, xhr) {
							layer.closeAll('loading');
						
							$.each(result.data, function(idx,obj) {
								$("input[type='checkbox'][data-id='"+obj.cId+"']").attr("checked","checked")
							});
							form.render();
						}
					});
				}
				
			});
		</script>
	</body>

</html>